<template>
  <u-popup mode="bottom" v-model="show" border-radius="22" closeable>
    <view class="content">
      <view class="pay-top">
        ￥<text>{{ getPayPrice[0] }}</text
        >.{{ getPayPrice[1] }}
      </view>
      <view class="pay-way">
        <view
          v-for="(type, index) in pay_type_list"
          class="pay-way-list"
          :key="index"
          @click="payway = type.payment"
        >
          <view class="flex">
            <!-- 余额支付 -->
            <i
              v-if="type.payment == 3"
              class="icon-consumption-fill iconfont"
              style="color: #09bb07; font-size: 54rpx"
            ></i>
            <!-- 微信支付 -->
            <i
              v-if="type.payment == 1 || type.payment == 101"
              class="icon-weixinzhifu iconfont"
              style="color: #09bb07; font-size: 54rpx"
            ></i>
            <!-- 货到付款 -->
            <i
              v-else-if="type.payment == 2"
              class="icon-yinhangka1 iconfont"
              style="color: #34cb9b; font-size: 54rpx"
            ></i>
            <!-- 线上支付 -->
            <i
              v-else-if="type.payment == 5"
              class="icon-money-rmb iconfont"
              style="color: #ec9d38; font-size: 52rpx; margin-right: 2rpx"
            ></i>
            <!-- 支付宝 -->
            <i
              v-else-if="type.payment == 4 || type.payment == 401"
              class="icon-zhifubao1 iconfont"
              style="color: #5a9ef7; font-size: 54rpx"
            ></i>
            <!-- adapay快捷 -->
            <i
              v-else-if="type.payment == 1001"
              class="icon-money-rmb iconfont"
              style="color: #ec9d38; font-size: 54rpx"
            ></i>
            <i
              v-else-if="type.payment == 7"
              class="icon-trust-fill iconfont"
              style="color: #f0250e; font-size: 54rpx"
            ></i>
            <i
              v-else-if="type.payment == 11"
              class="icon-money-currency-converter-fill iconfont"
              style="color: #8a2cd1; font-size: 54rpx"
            ></i>
			<i
			  v-else-if="type.payment == 12"
			  class="icon-money-yuefu iconfont"
			  style="color: #8a2cd1; font-size: 54rpx"
			></i>
            <text style="margin-left: 14rpx">{{ type.name }}</text>
          </view>
          <view class="is-select">
            <image
              v-if="payway == type.payment"
              :src="asyncImgs.images.choosed_red_icon"
              mode="aspectFit"
            />
            <view v-else></view>
          </view>
        </view>
      </view>
      <view class="safe-area-inset-bottom">
        <view class="confrim">
          <view @click="payOrder(order_id, payway)">{{
            $t("list.confirm")
          }}</view>
        </view>
      </view>
    </view>

    <!-- #ifdef H5 -->
    <view ref="html" id="aliFrom" v-html="html" v-show="false"></view>
    <!-- #endif -->
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      pay_type_list: [], // 支付方式
      payway: -1, // 支付方式
      template_id: [],
      show: false, // 显示支付按钮
      html: ""
    };
  },

  props: {
    order_id: {
      type: String,
      default: ""
    },
    order: {
      type: Object,
      default: ""
    }
  },

  computed: {
    getPayPrice() {
      let { order } = this;
      if (order && order.pay_price) return order.pay_price.split(".");
      return ["0", "00"];
    }
  },

  created() {
    this.getOrder();
  },

  methods: {
    getOrder() {
      var query = {
        page: 1,
        status: -1,
        _from: "app"
      };
      // #ifndef APP-PLUS
      query._from = "mini";
      // #endif
      this.$allrequest.order.getList(query).then((res) => {
        if (res.code == 0) {
          if (res.data.list.length >= 1) {
            this.template_id = res.data.template_id;
          }
        }
      });
    },
    payOrder(order_id, pay_type) {
      if (pay_type < 0) {
        uni.showToast({
          title: this.$t("order.chooseMethods"),
          icon: "none",
          duration: 2000
        });
        return false;
      }
	  // 如果是好友代付则跳转至好友代付详情页
	  if (pay_type == 7) {
	    this.$utils.toUrl(
	      `/order/pay-another/pay-another?orderId=${order_id}`
	    );
		this.show = false
	    return;
	  }


      if (pay_type === 11) {
        this.$utils.toUrl(`/other/offlinePayment/index?orderId=${order_id}`);
        this.show = false
        return;
      }

      if (this.order.pay_type == 2) {
        this.payOrderList(
          {
            order_id: order_id,
            pay_type: pay_type
          },
          (res) => {
            return this.$allrequest.order.meetPayData(res);
          }
        );
      } else {
        this.payOrderList(
          {
            order_id: order_id,
            pay_type: pay_type
          },
          (res) => {
            return this.$allrequest.order.payData(res);
          }
        );
      }
	  // 月付
	  if (pay_type === 12) {
	     this.timerId = setTimeout(() => {
			  this.$utils.toUrl(
				 "/order/order/order?status=1" ,
				 "redirectTo"
			  );
			}, 2000);
		
	    return ;
	  }
	  
    },
    payOrderList(data, payData) {
      uni.showLoading({
        title: this.$t("order.pay")
      });

      let _from = "mini";

      // #ifdef APP-PLUS
      _from = "app";
      // #endif

      payData({
        order_id: data.order_id,
        pay_type: data.pay_type,
        _from
      }).then((res) => {
        uni.hideLoading();
		
	
        this.paySubmit(res, data.pay_type);
      });
    },

    paySubmit(payData, pay_type = 0) {
      if (pay_type == 3 || pay_type == 2) {
        uni.showToast({
          title: payData.msg,
          icon: "none",
          duration: 2000
        });
        if (payData.code > 0) {
          return false;
        } else {
          this.show = false;
          return true;
        }
      }
      if (!payData.data) {
        uni.showToast({
          title: payData.msg,
          icon: "none",
          duration: 2000
        });
        return false;
      } else {
        // #ifdef H5
        if (pay_type == 4) {
          this.html = payData.data;
          this.show = false
          this.$nextTick(() => {
            document.getElementById("alipay_submit").submit();
          });
          return;
        }
        // #endif

        const that = this;
        uni.getProvider({
          service: "payment",
          success: function (res) {
            // 微信
            if (res.provider.indexOf("wxpay") > -1 && pay_type == 1) {
              // #ifdef MP-WEIXIN
              uni.requestPayment({
                provider: "wxpay",
                orderInfo: payData.res,
                timeStamp: payData.data.timeStamp,
                nonceStr: payData.data.nonceStr,
                package: payData.data.package,
                signType: payData.data.signType,
                paySign: payData.data.paySign,
                success: function (res) {},
                complete: function (res) {
                  if (
                    "requestPayment:fail" != res.errMsg &&
                    "requestPayment:fail cancel" != res.errMsg
                  ) {
                    uni.showToast({
                      title: that.$t("order.paySuc"),
                      icon: "none",
                      duration: 2000
                    });
                    that.show = false;
                    // 支付成功回调
                    that.$emit("paySuccess");
                  } else {
                    uni.showToast({
                      title: that.$t("order.payFail"),
                      icon: "none",
                      duration: 2000
                    });
                  }
                }
              });
              // #endif

              // #ifdef APP-PLUS
              uni.requestPayment({
                provider: "wxpay",
                orderInfo: {
                  appid: payData.data.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
                  noncestr: payData.data.noncestr, // 随机字符串
                  package: payData.data.package, // 固定值
                  partnerid: payData.data.partnerid, // 微信支付商户号
                  prepayid: payData.data.prepayid, // 统一下单订单号
                  timestamp: payData.data.timestamp, // 时间戳（单位：秒）
                  sign: payData.data.sign // 签名，这里用的 MD5 签名
                },
                success: function (res) {},
                complete: function (res) {
                  if (res.errMsg.indexOf("requestPayment:fail") == -1) {
                    uni.showToast({
                      title: that.$t("order.paySuc"),
                      icon: "none",
                      duration: 2000
                    });
                    that.show = false;
                    // 支付成功回调
                    that.$emit("paySuccess");
                  } else {
                    uni.showToast({
                      title: that.$t("order.payFail"),
                      icon: "none",
                      duration: 2000
                    });
                  }
                }
              });
              // #endif
            }

            // 支付宝
            if (res.provider.indexOf("alipay") > -1 && pay_type == 4) {
              uni.requestPayment({
                provider: "alipay",
                orderInfo: payData.data,
                complete: function (res) {
                  if (res.errMsg.indexOf("requestPayment:fail") == -1) {
                    uni.showToast({
                      title: that.$t("order.paySuc"),
                      icon: "none",
                      duration: 2000
                    });
                    that.show = false;
                    // 支付成功回调
                    that.$emit("paySuccess");
                  } else {
                    uni.showToast({
                      title: that.$t("order.payFail"),
                      icon: "none",
                      duration: 2000
                    });
                  }
                }
              });
            }
          }
        });
      }
    },

    setShowPopup() {
      this.show = true;

      this.$nextTick(() => {
        this.pay_type_list = this.order.pay_type_list;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.pay-top {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 40rpx 0;
  font-size: 32rpx;
  color: #262626;
  font-weight: bold;
  line-height: 1.4;

  text {
    font-size: 60rpx;
    line-height: 1;
  }
}

.pay-tips {
  padding: 14rpx 36rpx;
  background-color: #fbf8d9;
  font-size: 24rpx;
  color: #de6a1c;
}

.pay-way {
  padding: 0 24rpx;
  background: #fff;
  border-radius: 20rpx;

  .pay-way-list {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f8f8f8;
    height: 100rpx;

    &:last-of-type {
      border-bottom: 0;
    }

    .flex {
      display: flex;
      align-items: center;

      flex: 1;
      overflow: hidden;
    }
  }
}

.confrim {
  margin-top: 360rpx;
  padding: 12rpx 36rpx;

  view {
    width: 100%;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    font-size: 30rpx;
    color: #ffffff;
    background: linear-gradient(90deg, #f3150c, #f14b0c);
    border-radius: 38rpx;
  }
}

.is-select {
  view {
    width: 40rpx;
    height: 40rpx;
    background: #ffffff;
    border: 3rpx solid #8c8c8c;
    border-radius: 50%;
  }

  image {
    width: 40rpx;
    height: 40rpx;
  }
}

.content {
  background: #f2f2f2;
  padding: 0 24rpx;
}

::v-deep {
  .u-drawer-bottom {
  }
}
</style>
